import React, { Fragment} from "react";
import { Button, Table, DatePicker } from "antd";
import css from "styled-jsx/css";

import { withModal, mountModal } from "vendor/components/pro-hoc/withModal";
import Dialog from "./Dialog";

const AntdTheme: React.FC = () => {
    const bgColor = "rebeccapurple";
    return <Fragment >
        <DatePicker />
        <TestBtn />
        <TestTable />
    </Fragment>
}

export default AntdTheme;

const TestBtn: React.FC = () => {
    const handleClick = () => {
        const DialogModal = withModal(Dialog);
        mountModal(<DialogModal />)
    }

    return <Button type="primary" style={{marginBottom: 5}} onClick={handleClick}>弹出消息</Button>
}

const TestTable: React.FC = () => {
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];

    // 覆盖ant中的样式
    // language=SCSS
    const {className, styles} = css.resolve`.sk-table{
      :global(.ant-table){
        background: rebeccapurple;
      }
    }`

    return <Fragment>
        <Table size="small" className={`sk-table ${className}`} dataSource={dataSource} columns={columns} />
        {/*{styles}*/}
    </Fragment>
}